<!DOCTYPE html>
<html>
<head>
  <title>spin.js</title>
  <style type="text/css">
  body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
  }
  .preview {
    background: #aaa;
    color: black;
    width: 220px;
    height: 220px;
    margin: 0 20px;
    float: left;
    border-radius: 10px;
    position: relative;
  }
  #preview2 {
    background: #666;
    color: red;
  }
  </style>
</head>
<body>

<div id="preview1" class="preview"></div>
<div id="preview2" class="preview"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>
<script>
require.config({
  baseUrl: '..',
  paths: {
    jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min'
  }
})

require(['jquery', 'jquery.spin'], function ($) {
  $('#preview1').spin('tiny', 'teal')
  $('#preview2').spin({color: '#fff'})

  //Remove spinner upon click
  $('.preview').click(function () {
    $(this).spin(false)
  })
});
</script>
</body>
</html>
